@import "../../../css/variable.less";

.uploads-panel {
    .uploads-queue {
        .uploads-queue-item {
            width: 69px;
            height: 69px;
            border: @border-color solid 1px;
            border-radius: @border-radius;
            padding: 2px;
            float: left;
            margin-right: 10px;
            margin-bottom: 10px;
            background: #fff;
            box-sizing: content-box;
            position: relative;
            overflow: hidden;
            &.complete {
                &:hover {
                    .uploads-control {
                        display: block;
                    }
                }
            }
            &.uploads-ghost {
                border-style: dashed;
                * {
                    opacity: 0;
                }
            }
            &.uploads-chosen {
                opacity: .5;
            }
            &.complete,
            &.error {
                .uploads-progress {
                    display: none;
                }
            }
            &.error {
                border-color: @color-danger;
                .uploads-control {
                    .uploads-preview {
                        display: none;
                    }
                }
            }
            .uploads-err {
                position: absolute;
                height: 18px;
                line-height: 18px;
                background: @color-danger;
                color: #fff;
                text-align: center;
                left: 0;
                right: 0;
                bottom: 0;
                z-index: 100;
                font-size: 12px;
                display: none;
            }
            .uploads-move {
                width: 20px;
                height: 20px;
                display: block;
                cursor: move;
                position: absolute;
                right: 0;
                top: 0;
                z-index: 100;
            }
            .uploads-thumb {
                width: 69px;
                height: 69px;
            }
            .uploads-control {
                height: 22px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                text-align: center;
                z-index: 10;
                display: none;
                a {
                    width: 22px;
                    height: 22px;
                    border-radius: 100%;
                    line-height: 22px;
                    display: inline-block;
                    color: rgba(255, 255, 255, .8);
                    background: rgba(0, 0, 0, .5);
                    cursor: pointer;
                    text-align: center;
                }
            }
            .uploads-progress {
                width: 90%;
                height: 5px;
                position: absolute;
                left: 0;
                right: 0;
                top: 0;
                bottom: 0;
                margin: auto;
                z-index: 20;
            }
        }
    }
    .uploads-btn {
        width: 75px;
        height: 75px;
        border: @border-color dashed 1px;
        display: inline-block;
        background: @background-color;
        font-size: 30px;
        text-align: center;
        line-height: 68px;
        color: @color-muted;
        border-radius: @border-radius;
        &:hover {
            color: @color-primary;
            border-color: @color-primary;
        }
        .uploads-cloud-btn {
            position: absolute;
            right: 0;
            bottom: 0;
            width: 22px;
            height: 22px;
            display: block;
            line-height: 14px;
            font-size: 14px;
            background-color: rgba(0, 0, 0, .5);
            color: #fff;
            z-index: 1000;
            text-align: center;
            padding-top: 6px;
            padding-left: 3px;
            border-radius: 22px 0 0;
        }
    }
}

.uploads-preview {
    .uploads-preview-img {
        text-align: center;
        img {
            max-width: 100%;
            max-height: 500px;
            border-radius: @border-radius @border-radius 0 0;
        }
    }
    .uploads-preview-content {
        padding: 10px;
        p {
            margin: 0;
        }
    }
}